<template>
    <div :class="['search',showSearchResult?'showsearch':'']">
        <div class="list">
            <ul>
                <li v-for="(item,index) in resultList"
                :key="item.songmid"
                :data-imgmid="item.imgmid"
                :data-songmid="item.songmid"
                :data-songname="item.songname"
                :data-singer="item.singer"
                :data-index="index"
                @click="addPlay"
                :class="index===searchCurAnimate?'animate-addSong':''"
                >
                    <span class="result-songname">{{item.songname}}</span>
                    <span class="result-singer">{{item.singer}}</span>
                </li>
            </ul>
        </div>
        <div class="foot">
            <span class="icon-quit" @click="toggleShowSearchResult"></span>
        </div>
    </div>
</template>

<script>
import {mapState,mapGetters} from 'vuex'
export default {
    data(){
        return{
            searchAnimate:-1,
        }
    },
    props:{
        resultList:{
            type:Array,
            required:true,
        },
    },
    computed:{
        ...mapState([
            'playSong',
            'playList',
            'curPlayIndex',
            'paused',
            'showSearchResult',
            'searchCurAnimate'
        ]),
        ...mapGetters([
            'listTotal',
        ]),
    },
    methods:{
        addPlay(e){
            this.$store.commit('setSearchCurAnimate',parseInt(e.currentTarget.dataset.index));
            if(this.paused){
                this.$store.commit('setPaused');
            }
            let playSong={
                songname:e.currentTarget.dataset.songname,
                singer:e.currentTarget.dataset.singer,
                imgmid:e.currentTarget.dataset.imgmid,
                songmid:e.currentTarget.dataset.songmid
            }
            this.$store.commit('setPlaySong',playSong);
            if(this.listTotal===0){
                this.playList.unshift(playSong);
                this.$store.commit('setCurPlayIndex',0);
                this.$store.commit('setPlayList',this.playList);
            }else{
                for(let key in this.playList){
                    if(this.playList[key].songmid===playSong.songmid){
                        this.$store.commit('setCurPlayIndex',parseInt(key));
                        return;
                    }                  
                }
                this.playList.unshift(playSong);
                this.$store.commit('setPlayList',this.playList);
                this.$store.commit('setCurPlayIndex',0);
            }
        },
        toggleShowSearchResult(){
            this.$store.commit('setShowSearchResult',false);
            this.$store.commit('setSearchCurAnimate',-1);
        }
    },
    
}
</script>

<style scoped>
.search{
    z-index: 40;
    position: absolute;
    width: 100%;
    background:#fff;
    color: #000;
    left: 0;
    top: 40px;
    margin: 0;
    display: none; 
}
.showsearch{
    display: block;
}
.foot{
    background: rgb(0,193,218);
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 30px;
    color: #fff;
}
.list{
    overflow: auto;
    height:486px; 
}
.list li{
    border: 1px solid #ccc;
    height: 29px;
    line-height: 30px;
    font-size: 18px;
    position: relative;
    cursor: pointer;
}
.result-songname{
    position: absolute;
    display: inline-block;
    margin: 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
}
.result-singer{
    position: absolute;
    display: inline-block;
    left: 170px;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;;
}
.animate-addSong{
    animation: addSong 1s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
}
@keyframes addSong {
    0%{transform: scale(1,1);transform: translateY(0);opacity: 1;}
    100%{transform:scale(0.2,0.2);transform: translateY(50px);opacity: 0;}
}
</style>

